<template>
    <span class="sppp">最近一期测评平均分数
    </span>
    <div id="qpiont"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';
import { dataindex } from '@/api/team'
import { defineProps } from 'vue';

const props = defineProps({
    datadeep: Array,
    // required: true
});
const chartsY: any = ref();
const aa: any = ref();

const zqcounts = () => {
    const chartDom = document.getElementById('qpiont');
    const myChart = echarts.init(chartDom);
    window.addEventListener('resize', () => {
        myChart.resize()

        setTimeout(() => {
            myChart.resize()

        }, 500);
    })
    const option = {
        grid: {
            left: "1%",
            right: "12%",
            bottom: "15%",
            top: "5%",
            containLabel: true,
        },
        legend: {
            show: true,
            textStyle: {
                color: '#fff'
            },
            data: [{
                name: '',
                icon: 'rect'
            }, {
                name: ''
            }]
        },
        tooltip: {
            show: true,
        },
        xAxis: {
            name: "大队",
            nameTextStyle: {
                color: '#fff',
                fontSize: 8
            },
            data: chartsY.value,
            splitLine: {
                show: false,
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(66, 164, 255,0.3)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize: 10,
                rotate: "25"
            },
        },
        yAxis: [{
            type: 'value',
            // name: "最近一期测评平均分数",
            nameTextStyle: {
                color: '#fff',
                fontSize: 8
            },
            scale: true,
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(66, 164, 255,0.4)'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#fff',
                fontSize: 12
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'rgba(66, 164, 255,0.5)'
                }
            },
        }],
        series: [
            {
                // name: '采购项目提报',
                type: 'bar',
                barWidth: 20,
                zlevel: 2,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#39FF5A'
                        }, {
                            offset: 1,
                            color: '#B1FFDC'
                        }], false)
                    }
                },
                label: {
                    normal: {
                        show: false,
                        fontSize: 13,
                        color: '#14B6F3',
                        position: 'top',
                    }
                },
                data: aa.value
            }]
    };
    option && myChart.setOption(option);
}

const debouncedResize = debounce(zqcounts, 1000);
function debounce(func: { (): void; apply?: any; }, delay: number | undefined) {
    let timeoutId: number | undefined;

    return function () {
        const context = this;
        const args = arguments;

        clearTimeout(timeoutId);

        timeoutId = setTimeout(() => {
            func.apply(context, args);
        }, delay);
    };
}


watch(props, () => {
    console.log('count', props.datadeep)
    chartsY.value = props.datadeep && props.datadeep.map((item: any) => {
        return item.name
    })
    aa.value = props.datadeep && props.datadeep.map((item: any) => {
        return item.point
    })
    console.log('count', chartsY.value, aa.value)

    // zhutu()
    debouncedResize()
})
</script>

<style lang="scss" scoped>
@function torem($px) {
    //$px为需要转换的字号
    @return $px / 14px * 0.14rem; //100px为根字体大小
}

#qpiont {
    width: torem(500px);
    height: torem(450px);
    margin-left: torem(20px);
}

.sppp {
    margin: torem(10px);
    display: block;
}
</style>